<template>
  <div class="centers">
    <n-modal
      v-model:show="Obj.showModal"
      positive-text="确认"
      @positive-click="onPositiveClick"
      @negative-click="onNegativeClick"
      @Close="Close"
      negative-text="取消"
      :show-icon="false"
      preset="dialog"
    >
      <template #header>
        <div>{{ Obj.title }}</div>
      </template>
      <div>
        <n-form
          :model="formValue"
          :size="size"
          ref="formRef"
          :rules="Obj.rules"
          :label-placement="labelPlacement"
        >
          <n-grid :cols="24" :x-gap="12">
            <template v-for="(item, index) in Obj.FormData" :key="index">
              <n-form-item-gi
                v-if="item.show"
                :path="item.enName"
                :span="item.span"
                :label="`${item.label}:`"
              >
                <component
                  :is="item.type"
                  v-model:value="formValue[item.enName]"
                  :type="item.InputType"
                  :check-strategy="item.checkStrategy"
                  :disabled="item.disabled"
                  :checkable="item.checkable"
                  :cascade="item.cascade"
                  :multiple="item.multiple"
                  :clearable="item.clearable"
                  :placeholder="item.placeholder"
                  :src="item.src"
                  :options="item.options"
                  :size="item.size"
                  :style="{ width: item.width }"
                >
                  <n-collapse-item
                    v-for="(collapse, i) in item.options"
                    :key="i"
                    :title="collapse.title"
                  >
                    <n-grid :cols="24" :x-gap="12">
                      <n-form-item-gi
                        v-for="(collapseItme, i) in collapse.chidlren"
                        :key="i"
                        :span="collapseItme.span"
                        :label="collapseItme.label"
                      >
                        <component
                          :is="collapseItme.type"
                          v-model:value="formValue[collapseItme.enName]"
                          :disabled="collapseItme.disabled"
                          :placeholder="collapseItme.placeholder"
                          :options="collapseItme.options"
                          :size="collapseItme.size"
                          :style="{ width: collapseItme.width }"
                        >
                          <n-button v-if="collapseItme.type == 'n-upload'" :size="collapseItme.size"
                            >上传文件</n-button
                          >
                        </component>
                      </n-form-item-gi>
                    </n-grid>
                  </n-collapse-item>
                </component>
              </n-form-item-gi>
            </template>
          </n-grid>
        </n-form>

        <!-- <n-form v-if="FormState">
          <n-grid :cols="24" :x-gap="12">
            <n-form-item-gi :span="24" >
              <n-transfer
                virtual-scroll
                ref="transfer"
                v-model:value="value"
                :options="options"
                filterable
              />
            </n-form-item-gi>
          </n-grid>
           </n-form> -->
      </div>
      <!-- <template #action>
        <div>操作</div>
      </template> -->
      <!--底部插槽-->
      <slot name="footer"></slot>
    </n-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'Model',
  props: {
    title: {
      type: String,
    },
    showModal: {
      type: Boolean,
    },
    FormData: {
      type: Array,
    },
    formValue: {
      type: Object,
    },
    rules: {
      type: Object,
    },
    FormState: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    labelPlacement: {
      type:String,
      default: () => {
        return 'top'
      }
    }
  },
  components: {},
  setup(props, { emit }) {
    const formRef = ref(null);
    const show = ref(true);
    const Obj = props;
    //模态框关闭事件
    const onPositiveClick = () => {
      formRef.value.validate((errors) => {
        if (!errors) {
          emit('ModelClick', false);
        }
      });

    };
    const Close = () => {
      emit('close', false);
    };
    const onNegativeClick = () => {
      emit('close', false);
    };

    return {
      show,
      Obj,
      onPositiveClick,
      onNegativeClick,
      Close,
      formRef,
      size: ref('medium'),
    };
  },
});
</script>

<style lang="less" scoped>
.centers :deep .n-transfer {
  width: 100%;
}
</style>
